<template>
    <div class="wrapper wrapper8">
        <div class="page-header">
            <h3>{{ title }}</h3>
        </div>
        <div class="page-content">
            <div class="alert alert-danger">当前数值为: {{ count }}</div>
            <button class="btn btn-primary" @click="increment">增加</button>
            &nbsp;&nbsp;
            <button class="btn btn-danger" @click="x += 2">X++</button>
            &nbsp;&nbsp;
            <button class="btn btn-danger" @click="y += 1">Y++</button>
            &nbsp;&nbsp;
            <button class="btn btn-danger" @click="state.num += 1">
                num++
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, defineProps, watchEffect } from "vue";

const props = defineProps({
    title: {
        type: String,
        default: "Vue3.0",
    },
});

const count = ref(0);
const x = ref(0);
const y = ref(0);

const increment = () => {
    count.value++;
};

const state = reactive({
    num: 1,
});

watch(count, (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);
});

watch(
    () => x.value + y.value,
    (sum) => {
        console.log("sum", sum);
    }
);

watch(
    () => state.num,
    (num) => {
        console.log("num", num);
    }
);

watchEffect(() => {
    console.log("watchEffect count", count.value);
});
</script>

<style lang="scss" scoped></style>
